<template>
  <div id="divml1">
    <el-button id="el-button" type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
    <el-container>
      <el-container>
        <el-aside width="250px">
          <div id="divml1-1">
            <img
              :src="res.image"
              alt=""/>
          </div>
          <p id="divmlp">{{res.phone}}</p>
          <el-tag type="info" id="divmlel">{{res.name}}</el-tag>
        </el-aside>
        <el-main>
          <table cellpadding="0" cellspacing="0" id="divmltable1">
            <tr>
              <td>用户ID</td>
              <td>{{res.id}}</td>
              <td>注册时间</td>
              <td>{{fromData(res.create_time)}}</td>
            </tr>
            <tr>
              <td>昵称</td>
              <td>{{res.nickname}}</td>
              <td>生日</td>
              <td>{{fromData(res.birthday)}}</td>
            </tr>
            <tr>
              <td>性别</td>
              <td>{{res.sex==0?'男':'女'}}</td>
              <td>职业</td>
              <td>{{res.job}}</td>
            </tr>
            <tr>
              <td>手机</td>
              <td>{{res.phone}}</td>
              <td>健身经验</td>
              <td>{{res.experience}}</td>
            </tr>
            <tr>
              <td>城市</td>
              <td>{{res.city}}</td>
              <td>健身目的</td>
              <td>{{res.purpose}}</td>
            </tr>
          </table>
        </el-main>
      </el-container>
    </el-container>
    <!-- 上-人员信息表+表格 -->
    <div id="tablediv">
      <p id="divmlp1"><span>统计信息</span></p>
    </div>
    <table cellpadding="0" cellspacing="0" id="divmltable2">
      <tr>
        <th>消费总金额</th>
        <th>本月消费</th>
        <th>本月上课数</th>
        <th>优惠券(张)</th>
        <th>有效会员卡</th>
      </tr>
      <tr>
        <td>￥2000.00</td>
        <td>￥2000.00</td>
        <td>2000</td>
        <td>10</td>
        <td>1</td>
      </tr>
    </table>
    <!-- 以上表为统计信息表 -->
  </div>
</template>

<script>
export default {
  data:function () {
    return {
      id:"",
      res:[],
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [],
      numberValidateForm: {
        money: ''
      }
    };
  },

  methods: {
    back(){
      this.$router.back()
    },

    stop() {
      this.$confirm("是否停用?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "停用成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消停用",
          });
        });
    },
    
    fromData(millisecond) {
    let time = new Date(millisecond)
    let month = time.getMonth() + 1 
    let date = time.getDate()
    let hours = time.getHours()
    let minutes = time.getMinutes()
    // let second = time.getSeconds() // 获取秒数
    // 小于10前加一个0
    if(month < 10) {
      month = '0' + month
    }
    if(date < 10) {
      date = '0' + date
    }
    // 拼接正确格式返回
    return time.getFullYear() + '-' + month + '-' + date 
    },

     getdata(){
      this.id=this.$route.params.id
      this.$axios({
        url:'/gym/user/find',
        params:{
          id:this.id
        }
      }).then((res)=>{
            this.res=res.data.data
      })
    }
  },
  
  mounted(){
    // this.id = sessionStorage.getItem('idc');
    this.getdata()

  }
};
</script>


<style scoped lang="less">
#divml1 {
  margin: 20px;
};

#el-button{
  margin-left: 92%;
  margin-bottom: 10px;
  background: white;
  color: #b3b3b3;
  border: 1px solid #d3dce6;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 30px;
  padding: 30px;
  #divmlp {
    line-height: 30px;
  }
};

#divmlel {
  margin-top: 20px;
};

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
};

body > .el-container {
  margin-bottom: 40px;
};

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
};

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
};

#divml1-1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin:0 auto
};

#divmltable1 {
  width: 90%;
  border: 1px solid #d6d6d6;
  border-collapse: collapse;
};

td {
  padding: 10px;
  border: 1px solid #d6d6d6;
  line-height: 20px;
  border-collapse: collapse;
};

#divmltable1{margin: 0 auto;};

#divmltable2 {
  width: 100%;
  line-height: 20px;
  border: 1px solid #d6d6d6;
  td {
    border: 1px solid #d6d6d6;
    padding: 20px 20px;
  };

  th {
    border: 1px solid #d6d6d6;
    padding: 20px 20px;
  }
};

#tablediv {
  height: 20%;
  background: #c7c7c7;
  margin-top: 20px;
  border-radius: 5px 5px 0 0;
};

#divmlp1 {
  font-size: 16px;
  height: 30px;
  span {
    float: left;
    line-height: 30px;
    margin-left: 10px;
  }
};

a {
  text-decoration: none;
};

#mllel {
  margin-bottom: 30px;
};
</style>